<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>03-Vue模板语法</title>
    <script type="text/javascript" src="../vue.js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <h1>动态参数</h1>
      <a v-bind:[attribute_name]="url">跳转链接</a>
      <a v-bind:[attr]="url">跳转链接</a>

      <hr />

      <input v-on:[event_name]="event" type="text" />
      <button @click="event_name = 'input' ">input</button>
      <button @click="event_name = 'change' ">change</button>
    </div>

    <script>
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          attribute_name: "href",
          attribute_msg: "hr",
          url: "http://www.baidu.com",
          event_name: "input",
        },
        methods: {
          event() {
            console.log("事件被调用了");
          },
        },
        computed: {
          attr() {
            return this.attribute_msg + "ef";
          },
        },
      });
    </script>
  </body>
</html>

<!-- 
  对动态参数的约束

  1. 动态参数的值要求是一个 string 类型，否则会被忽略
  2. 动态参数的表达式由于语法约束，不能有空格和引号，可以使用计算属性来解决。
  3. 动态参数里面尽量不要用大写字符，因为浏览器会把 attribute 名 全部强制转为小写。
-->
